<template>
  <div class="app-container">
    <el-backtop visibility-height="10"></el-backtop>
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="queryParams.country"
            placeholder="输入城市名可查找"
            clearable
            @clear="handleFilterClear"
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :style="{height: scrollerHeight, overflow: 'auto'}"
            height="300px"
            :data="country"
            accordion
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="code"
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="公司名称" prop="companyName">
            <el-input
              v-model="queryParams.companyName"
              placeholder="请输入公司名称"
              clearable
              @clear="handleClearQueryParam()"
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="公司规模">
            <el-select
              v-model="queryParams.scale"
              placeholder="公司规模"
              clearable
              @clear="handleClearQueryParam()"
              style="width: 240px"
            >
              <el-option
                v-for="scale in scaleOptions"
                :key="scale.value"
                :label="scale.label"
                :value="scale.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-select
              v-model="queryParams.state"
              placeholder="公司状态"
              clearable
              @clear="handleClearQueryParam()"
              style="width: 240px"
            >
              <el-option
                v-for="dict in dictOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="queryParams.startTime"
              style="width: 240px"
              @clear="handleClearQueryParam()"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" :loading="loading" @click="handleQuery">搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" :loading="loading" @click="resetQuery">重置所有条件
            </el-button>
            <el-button type="warning" icon="el-icon-close" size="mini" @click="handleFilterClear">关闭展开节点
            </el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAddButton"
            >新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
            >修改
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
            >删除
            </el-button>
          </el-col>
          <!--          <el-col :span="1.5">-->
          <!--            <el-button-->
          <!--              type="info"-->
          <!--              plain-->
          <!--              icon="el-icon-info"-->
          <!--              size="mini"-->
          <!--              :disabled="multiple"-->
          <!--              :loading="infoLoading"-->
          <!--              @click="handleInfo"-->
          <!--            >详情-->
          <!--            </el-button>-->
          <!--          </el-col>-->
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-delete"
              size="mini"
              @click="handleReFreshCache"
            >刷新缓存
            </el-button>
          </el-col>
        </el-row>

        <el-table v-loading="loading" :data="companyInfoList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center"/>
          <el-table-column label="公司编号" align="center" key="id" prop="id" width="80"/>
          <el-table-column label="公司名称" align="center" key="company" prop="company" width="150"/>
          <el-table-column label="联系人" align="center" key="principal" prop="principal"/>
          <el-table-column label="联系电话" align="center" key="phone" prop="phone" width="150"/>
          <el-table-column label="所在城市" align="center" key="address" prop="address" width="120"/>
          <el-table-column label="公司规模" align="center" key="scale" prop="scale" width="130"/>
          <el-table-column label="公司状态" align="center" key="state">-->
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.state"
                :active-value="0"
                :inactive-value="1"
                @change="handleStatusChange(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="创立时间" align="center" key="start_time" prop="start_time" width="160"/>
          <el-table-column
            label="操作"
            width="180"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-info"
                :loading="infoLoading"
                @click="handleInfo(scope.row)"
              >查看
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
              >修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pageRow">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page="queryParams.pageNum" :page-sizes="[6, 12, 24, 40]"
                         :page-size="queryParams.pageSize"
                         layout="total, sizes, prev, pager, next, jumper" :total="companyInfoList_Total"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="新增公司" :visible.sync="saveDialogFormVisible" :before-close="handleDialogClose"
               append-to-body
               width="600px"
    >
      <el-form ref="form" :model="saveDialogForm" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="公司名称" prop="company" >
              <el-input v-model="saveDialogForm.company" placeholder="请输入公司名称" maxlength="20"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="principal">
              <el-input v-model="saveDialogForm.principal" placeholder="请输入联系人姓名" maxlength="10"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="saveDialogForm.phone" placeholder="请输入联系电话" maxlength="20"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系邮箱" prop="email">
              <el-input v-model="saveDialogForm.email" placeholder="请输入联系邮箱" maxlength="20"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="公司规模" prop="scale">
              <el-select v-model="saveDialogForm.scale" placeholder="请选择公司规模" clearable>
                <el-option v-for="scale in scaleOptions" :key="scale.label"
                           :label="scale.label" :value="scale.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司状态" prop="state">
              <el-select v-model="saveDialogForm.state" placeholder="请选择公司状态" clearable>
                <el-option v-for="dict in dictOptions" :key="dict.label"
                           :label="dict.label" :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="公司地址" prop="country">
              <el-cascader
                v-model="saveDialogForm.country"
                placeholder="选择公司地址"
                :options="countryVersion2"
                filterable
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创立时间" prop="start_time">
              <el-date-picker
                v-model="saveDialogForm.start_time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
                style="width: 200px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="公司图片">
              <el-upload
                class="upload-demo"
                ref="upload"
                accept=".jpg"
                :headers="headers"
                :action="uploadUrl"
                :file-list="saveDialogForm.fileList"
                :auto-upload="false"
                list-type="picture"
                limit="3"
                :before-upload="beforeAvatarUpload"
                :on-exceed="handleExceed"
                :on-success="handleAvatarSuccess"
              >
                <el-button slot="trigger" size="small" icon="el-icon-upload" type="success">选取文件</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg文件，且不超过2mb</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose">取 消</el-button>
        <el-button type="primary" @click="handleSave">提 交</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑公司" :visible.sync="editDialogFormVisible" :before-close="handleDialogClose"
               append-to-body
               width="600px"
    >
      <el-form ref="form" :model="saveDialogForm" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="公司名称" prop="company">
              <el-input v-model="saveDialogForm.company" disabled placeholder="请输入公司名称" maxlength="20"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="principal">
              <el-input v-model="saveDialogForm.principal" placeholder="请输入联系人姓名" maxlength="10"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="saveDialogForm.phone" placeholder="请输入联系电话" maxlength="20"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系邮箱" prop="email">
              <el-input v-model="saveDialogForm.email" placeholder="请输入联系邮箱" maxlength="20"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="公司规模" prop="scale">
              <el-select v-model="saveDialogForm.scale" placeholder="请选择公司规模" clearable>
                <el-option v-for="scale in scaleOptions" :key="scale.label"
                           :label="scale.label" :value="scale.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司状态" prop="state">
              <el-select v-model="saveDialogForm.state" placeholder="请选择公司状态" clearable>
                <el-option v-for="dict in dictOptions" :key="dict.label"
                           :label="dict.label" :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="公司地址" prop="country">
              <el-cascader
                v-model="saveDialogForm.country"
                placeholder="选择公司地址"
                :options="countryVersion2"
                filterable
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创立时间" prop="start_time">
              <el-date-picker
                v-model="saveDialogForm.start_time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
                style="width: 200px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="公司图片">
              <el-upload
                class="upload-demo"
                ref="upload"
                accept=".jpg"
                :headers="headers"
                :action="uploadUrl"
                :file-list="saveDialogForm.fileList"
                :auto-upload="false"
                list-type="picture"
                limit="3"
                :before-upload="beforeAvatarUpload"
                :on-exceed="handleExceed"
                :on-success="handleAvatarSuccess"
                :before-remove="beforeRemove"
                :on-remove="handleRemove"
              >
                <el-button slot="trigger" size="small" icon="el-icon-upload" type="success">选取文件</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg文件，且不超过2mb</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose">取 消</el-button>
        <el-button type="primary" @click="handleModify">提 交</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="查看详情"
      :visible.sync="detailsDialogFormVisible"
      width="800px"
      :before-close="handleDetailsDialogClose"
    >
      <el-row style="display: flex; justify-content: flex-end;" v-if="selectShow">
        <el-select v-model="detailsSelect.value" placeholder="请选择" @change="changeDetailDialogSelect">
          <el-option
            v-for="item in detailsSelect.detailsOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-row>
      <el-row style="margin-top: 20px" v-loading="infoLoading">
        <el-tabs v-model="tabs" tab-position="left" style="height: 625px;">
          <el-tab-pane label="公司信息">
            <el-descriptions direction="vertical" :column="2" border>
              <el-descriptions-item label="公司名">{{ companyInfoById.companyInfoVos.company }}</el-descriptions-item>
              <el-descriptions-item label="联系人">{{ companyInfoById.companyInfoVos.principal }}</el-descriptions-item>
              <el-descriptions-item label="联系电话">{{ companyInfoById.companyInfoVos.phone }}</el-descriptions-item>
              <el-descriptions-item label="联系邮箱">{{ companyInfoById.companyInfoVos.email }}</el-descriptions-item>
              <el-descriptions-item label="公司规模">{{ companyInfoById.companyInfoVos.scale }}</el-descriptions-item>
              <el-descriptions-item label="入驻时间">{{
                  companyInfoById.companyInfoVos.start_time
                }}
              </el-descriptions-item>
              <el-descriptions-item label="联系地址">{{ companyInfoById.companyInfoVos.address }}</el-descriptions-item>
              <el-descriptions-item label="公司状态">{{ companyInfoById.companyInfoVos.state === 0 ? '启用' : '禁用' }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="公司图片" lazy>
            <el-carousel height="625px" v-if="companyInfoById.companyInfoVos.companyPhoto.length !== 0">
              <el-carousel-item v-for="photo in companyInfoById.companyInfoVos.companyPhoto" :key="photo.cpid">
                <el-image
                  :src="minio_host + photo.location"
                  :fit="cover"
                  :preview-src-list="srcList"
                >
                </el-image>
              </el-carousel-item>
            </el-carousel>
            <el-empty v-else height="625px" description="该公司暂未添加图片"></el-empty>
          </el-tab-pane>
          <el-tab-pane label="已发布的岗位">
            <el-table
              :data="companyInfoById.jobs"
              height="620px"
              style="width: 100%;"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="岗位编号">
                      <span>{{ props.row.id }}</span>
                    </el-form-item>
                    <el-form-item label="岗位名称">
                      <span>{{ props.row.job_name }}</span>
                    </el-form-item>
                    <el-form-item label="岗位地址">
                      <span>{{ props.row.job_address }}</span>
                    </el-form-item>
                    <el-form-item label="薪资情况">
                      <span>{{ props.row.job_price }}</span>
                    </el-form-item>
                    <el-form-item label="学历要求">
                      <span>{{ props.row.job_education }}</span>
                    </el-form-item>
                    <el-form-item label="岗位状态">
                      <span>{{ props.row.job_status }}</span>
                    </el-form-item>
                    <el-form-item label="岗位类型">
                      <span>{{ props.row.job_type }}</span>
                    </el-form-item>
                    <el-form-item label="岗位描述">
                      <span>{{ props.row.job_description }}</span>
                    </el-form-item>
                    <el-form-item label="岗位要求">
                      <span>{{ props.row.job_experience }}</span>
                    </el-form-item>
                    <el-form-item label="岗位责任">
                      <span>{{ props.row.job_responsibility }}</span>
                    </el-form-item>
                    <el-form-item label="岗位福利">
                      <span>{{ props.row.job_welfare }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column
                prop="id"
                label="编号"
                width="50"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="job_name"
                label="工作名称"
                width="150"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="job_address"
                label="工作城市"
                width="120"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="job_education"
                label="学历要求"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="job_price"
                label="薪资情况"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="job_type"
                label="招聘类型"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="job_status"
                label="招聘状态"
                align="center"
              >
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-row>

    </el-dialog>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import { uuid } from '@/utils/uuid'

export default {
  name: 'company',
  data() {
    return {
      tabs: '',
      loading: false,
      infoLoading: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      ids: [],
      minio_host: window.application.minio_host + 'firmphotos/',
      headers: {
        token: localStorage.getItem('token')
      },
      detailsSelect: {
        value: '',
        detailsOptions: []
      },
      srcList: [],
      selectShow: '',
      saveDialogFormVisible: false,
      editDialogFormVisible: false,
      detailsDialogFormVisible: false,
      companyInfoById: {
        companyInfoVos: {
          id: '',
          principal: '',
          phone: '',
          email: '',
          company: '',
          start_time: '',
          scale: '',
          address: '',
          state: 0,
          uuid: '',
          companyPhoto: []
        },
        jobs: []
      },
      innerVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      queryParams: {
        companyName: '',
        scale: '',
        state: '',
        startTime: [],
        country: '',
        pageNum: 1,
        pageSize: 12,
        treeNode: {}
      },
      dictOptions: [
        {
          label: '启用',
          value: 0
        },
        {
          label: '禁用',
          value: 1
        }
      ],
      scaleOptions: [
        { label: '1-10人', value: '1-10人' },
        { label: '10-100人', value: '10-100人' },
        { label: '100-200人', value: '100-200人' },
        { label: '200-500人', value: '200-500人' },
        { label: '500-1000人', value: '500-1000人' },
        { label: '1000-2000人', value: '1000-2000人' },
        { label: '2000-5000人', value: '2000-5000人' },
        { label: '5000-10000人', value: '5000-10000人' },
        { label: '10000人以上', value: '10000人以上' }
      ],
      rules: {
        company: [
          { required: true, message: '公司名称不能为空', trigger: ['blur', 'change'] },
          { min: 6, max: 20, message: '公司名称长度必须介于 6 和 20 之间', trigger: ['blur', 'change'] }
        ],
        principal: [
          { required: true, message: '联系人不能为空', trigger: ['blur', 'change'] },
          { min: 2, max: 10, message: '联系人长度必须介于 2 和 10 之间', trigger: ['blur', 'change'] }
        ],
        phone: [
          { required: true, message: '联系电话不能为空不能为空', trigger: ['blur', 'change'] },
          { min: 6, max: 20, message: '岗位地址长度必须介于 6 和 20 之间', trigger: ['blur', 'change'] }
        ],
        email: [
          { required: true, message: '联系邮箱不能为空', trigger: ['blur', 'change'] },
          { min: 6, max: 20, message: '联系邮箱长度必须介于 6 和 20 之间', trigger: ['blur', 'change'] }
        ],
        scale: [
          { required: true, message: '公司规模要求不能为空', trigger: ['blur', 'change'] }
        ],
        state: [
          { required: true, message: '公司状态不能为空', trigger: ['blur', 'change'] }
        ],
        country: [
          { required: true, message: '公司地址要求不能为空', trigger: ['blur', 'change'] }
        ],
        start_time: [
          { required: true, message: '创立时间不能为空', trigger: ['blur', 'change'] }
        ]
      },
      dialogFormTitle: '',
      saveDialogForm: {
        principal: '',
        phone: '',
        email: '',
        company: '',
        scale: '',
        country: [],
        state: 0,
        start_time: '',
        fileList: [],
        uuid: ''
      }
    }
  },
  computed: {
    ...mapGetters(['adminInfo', 'country', 'countryVersion2', 'companyInfoList', 'companyInfoList_Total', 'companyInfoByIds', 'companyList']),
    uploadUrl() {
      return '/adminSever/common/commitPhoto/' + this.saveDialogForm.uuid
    },
    urlComputed(url) {
      return window.application.minio_host + 'firmphotos/' + url.location
    },
    scrollerHeight: function() {
      return (window.innerHeight - 180) + 'px'
    }
  },
  watch: {
    'queryParams.country': {
      handler: function(val) {
        if (val === '') this.handleFilterClear()
        this.$refs.tree.filter(val)
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      this.$store.dispatch('company/getAllCompany')
      this.$store.dispatch('company/getCompanyInfoList', this.queryParams)
        .catch(error => {
          this.$message.error(error)
        })
        .finally(() => {
          setTimeout(() => {
            this.loading = false
            // this.$message.success({
            //   message:"数据加载成功!",
            //   duration: 1500
            // })
          }, 500)
        })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    handleNodeClick(data) {
      this.queryParams.treeNode = data
      this.getList()
      document.documentElement.scrollTop = 0
    },
    handleClearQueryParam() {
      this.getList()
    },
    handleQuery() {
      this.getList()
    },
    resetQuery() {
      this.queryParams = {
        companyName: '',
        scale: '',
        state: '',
        startTime: [],
        country: '',
        pageNum: 1,
        pageSize: 12,
        treeNode: {},
        uuid: ''
      }
      this.getList()
    },
    handleDialogClose() {
      this.$confirm('此操作将不会保存已输入或修改的信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dialogCloseEvent()
      })
    },
    dialogCloseEvent() {
      this.saveDialogForm = {
        principal: '',
        phone: '',
        email: '',
        company: '',
        scale: '',
        country: [],
        state: 0,
        start_time: '',
        fileList: [],
        uuid: ''
      }
      this.saveDialogFormVisible = false
      this.editDialogFormVisible = false
      this.$refs.form.resetFields()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    handleFilterClear() {
      this.$refs.tree.store._getAllNodes().forEach(node => node.expanded = false)
    },
    /** 更新按钮操作 */
    handleUpdate(row) {
      this.editDialogFormVisible = true
      if (row instanceof PointerEvent) {
        let companyInfo = this.companyInfoList.find(company => company.id === this.ids[0])
        this.fillData(companyInfo)
      } else if (row instanceof Object) {
        this.fillData(row)
      }
    },
    fillData(companyInfo) {
      const { principal, phone, email, company, scale, address, state, start_time, companyPhoto, uuid } = companyInfo
      this.saveDialogForm.principal = principal
      this.saveDialogForm.phone = phone
      this.saveDialogForm.email = email
      this.saveDialogForm.company = company
      this.saveDialogForm.scale = scale
      this.saveDialogForm.state = state
      this.saveDialogForm.start_time = start_time
      this.saveDialogForm.uuid = uuid
      let reg = /.+?(省|市|自治区|自治州|县|区)/g
      this.saveDialogForm.country = address.match(reg)
      this.saveDialogForm.fileList = this.handleCompanyPhoto(companyPhoto)
    },
    handleModify() {
      let that = this
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.$store.dispatch('company/modifyCompanyInfo', this.saveDialogForm)
            .then((resp) => {
              const data = { resp }
              if (data) {
                that.$refs.upload.submit()
              }
              setTimeout(() => {
                that.$message.success({ message: '公司信息修改成功', duration: 1500 })
              }, 500)
            })
            .catch((msg) => {
              this.$message({ type: 'error', message: msg, duration: 3000 })
            })
            .finally(() => {
              this.dialogCloseEvent()
              this.getList()
            })
        }
      })
    },
    handleCompanyPhoto(companyPhotos) {
      if (companyPhotos.length === 0) return []
      let file_List = []
      companyPhotos.forEach(companyPhoto => {
        file_List.push({
          'name': companyPhoto.file_name,
          'url': window.application.minio_host + companyPhoto.bucket + '/' + companyPhoto.location
        })
      })
      return file_List
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('此操作将会删除所选信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (row instanceof PointerEvent) {
          this.deleteMethod(this.ids)
        } else {
          this.deleteMethod([row.id])
        }
      })
    },
    deleteMethod(ids) {
      this.$store.dispatch('company/removeByIds', ids)
        .then((resp) => {
          if (resp.data) this.$message({ type: 'success', message: '操作成功', duration: 2000 })
        })
        .catch((error) => {
          this.$message({ type: 'error', message: error, duration: 3000 })
        })
        .finally(() => {
          this.getList()
        })
    },
    /** 详情按钮操作 */
    handleInfo(row) {
      this.infoLoading = true
      if (row instanceof PointerEvent) {
        // 工具栏
        this.$store.dispatch('company/companyInfoByIds', { 'ids': this.ids })
          .then((resp) => {
            this.selectShow = true
            let options = []
            this.companyList.forEach(company => {
              if (this.ids.includes(company.id)) {
                options.push({ 'label': company.company, 'value': company.company })
              }
            })
            this.detailsSelect.detailsOptions = options
          })
          .catch((error) => {
          })
          .finally(() => {
          })
      } else if (row instanceof Object) {
        // 表格内
        this.$store.dispatch('company/companyInfoByIds', { 'ids': [row.id] })
          .then((resp) => {
            this.companyInfoById = resp[0]
            this.selectShow = false
          })
          .finally(() => {
          })
      }
      setTimeout(() => {
        this.detailsDialogFormVisible = true
        this.infoLoading = false
      }, 500)
    },
    changeDetailDialogSelect() {
      this.infoLoading = true
      // this.companyInfoById = this.companyInfoByIds.find(company => company.companyInfoVos.company === this.detailsSelect.value)
      this.infoLoading = false
    },
    handleDetailsDialogClose() {
      this.companyInfoById = {
        companyInfoVos: {
          id: '',
          principal: '',
          phone: '',
          email: '',
          company: '',
          start_time: '',
          scale: '',
          address: '',
          state: '',
          uuid: '',
          companyPhoto: []
        },
        jobs: []
      }
      this.tabs = '0'
      this.detailsDialogFormVisible = false
      this.selectShow = ''
      this.detailsSelect = {
        value: '',
        detailsOptions: []
      }
    },
    handleAddButton() {
      this.saveDialogFormVisible = true
    },
    handleSave() {
      let that = this
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.saveDialogForm.uuid = uuid(20, 62)
          this.$store.dispatch('company/saveCompanyInfo', this.saveDialogForm)
            .then((resp) => {
              console.log(resp.msg)
              if (!resp.msg === undefined) {
                console.log(111)
                this.$message({ type: 'error', message: resp.msg, duration: 3000 })
                return
              }
              const data = { resp }
              if (data) {
                that.$refs.upload.submit()
              }
              setTimeout(() => {
                that.$message.success({ message: '公司基本信息添加成功', duration: 1500 })
              }, 500)
              this.dialogCloseEvent()
            })
            .finally(() => {
              this.getList()
            })
        }
      })
    },
    handleAvatarSuccess(res, file) {
      this.$refs.upload.clearFiles()
      this.saveDialogFormVisible = false
    },
    /** 刷新缓存操作 */
    async handleReFreshCache() {
      this.loading = true
      await this.$store.dispatch('company/clearCache').then((resp) => {
        if (resp) {
          setTimeout(() => {
            this.$message({
              type: 'success',
              message: '清理缓存成功',
              duration: 1500
            })
          }, 500)
        }
      })
      await this.getList()
    },
    // 公司状态修改
    handleStatusChange(row) {
      let text = row.state === 0 ? '启用' : '停用'
      this.$confirm(`确认要${text}该公司吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('company/updateState', { 'id': row.id, 'state': row.state })
          .then((resp) => {
            if (resp.data) this.$message({ type: 'success', message: `成功${text}该公司` })
          })
      }).catch(() => {
        row.state = row.state === 0 ? 1 : 0
      })
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式, 已默认取消上传!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB, 已默认取消上传!')
        return false
      }
      return isJPG && isLt2M
    },
    handleExceed() {
      this.$message.error('文件数量不能超过3个')
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleRemove(file, fileList) {
      let url = file.url.split('/firmphotos/')
      this.$store.dispatch('company/deletePhoto', { 'url': url[1] })
        .then((resp) => {
          if (resp.data) this.$message({ type: 'success', message: '图片删除成功！', duration: 1500 })
          if (resp.msg !== undefined) this.$message({ type: 'error', message: resp.msg, duration: 1500 })
        }).finally(() => {
        this.getList()
      })
    }
  }
}
</script>

<style lang="css">

.pageRow {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}

</style>
